<template>
  <div class="search">
    <!-- 顶部搜索框 -->
    <form action>
      <van-search
        v-model="search_names"
        placeholder="花洒仅398元"
        show-action
        shape="round"
        @search="onSearch"
        @cancel="onCancel"
      >
        <van-icon @click="onSearch" slot="right-icon" name="search" />
        <div class="icon" slot="left-icon">
          商品
          <van-icon name="arrow-down" />
        </div>
      </van-search>
    </form>

    <van-row>
      <!-- 热词推荐 -->
      <van-col>
        <div class="search_col search_fire">
          <van-icon name="fire-o" />热词推荐
        </div>
        <div class="search_button">
          <van-button round size="small" type="default">决战平安京</van-button>
          <van-button round size="small" type="default">魂斗罗</van-button>
          <van-button round size="small" type="default">华为手机</van-button>
          <van-button round size="small" type="default">苹果手机</van-button>
          <van-button round size="small" type="default">空调</van-button>
          <van-button round size="small" type="default">冰箱</van-button>
          <van-button round size="small" type="default">海尔洗衣机</van-button>
          <van-button round size="small" type="default">小米电视</van-button>
        </div>
      </van-col>
      <!-- 搜索历史 -->
      <van-col>
        <div class="search_col search_clock">
          <van-icon name="clock-o" />搜索历史
          <div v-for="(item,index) in searchAdd" :key="index" class="search_history">
            <p @click="cearch">{{item.search_name}}</p>
          </div>
        </div>
        <!-- 清空搜索历史 -->
        <van-button class="search_default" type="default" @click="deleteSearch">清空搜索历史</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchAdd: [],
      search_names: ''
    }
  },
  methods: {
    // 搜索历史
    async getSearech () {
      const { data: res } = await this.$http.get('/search')
      // console.log(res.data)
      this.searchAdd = res.data
    },
    // 搜索添加
    async onSearch () {
      const { data: res } = await this.$http.post('/search', {
        search_names: this.search_names
      })
      // console.log(res)
      this.searchAdd = res.data
      sessionStorage.setItem('search_name', this.search_names)
      this.$router.push('/search_details')
    },
    // 清空搜索历史
    async deleteSearch () {
      const { data: res } = await this.$http.delete('/search')
      // console.log(res)
      this.searchAdd = res.data
    },
    // 取消
    onCancel () {
      this.$router.push('/classify')
    },
    cearch () {
      this.$router.push('/search_details')
    }
  },
  created () {
    this.getSearech()
  }
}
</script>

<style lang='less'>
body {
  background-color: #ffffff;
}

.search .icon .van-icon {
  float: right;
}

.search .van-row {
  width: 100%;
}

.search .van-col {
  width: 100%;
  padding: 2%;
}

.search .van-col .search_col {
  font-size: 15px;
}

.search .van-col .van-icon {
  color: #f31b63;
  font-weight: 600;
  margin-right: 2%;
}

.search_button {
  margin-top: 5%;
  margin-bottom: 5%;
}

.search_button .van-button {
  margin-right: 10px;
  margin-top: 10px;
}

.search_default {
  width: 70%;
  margin-top: 4%;
  margin-left: 15%;
}

.search_history > p {
  padding: 6% 5% 0% 6%;
}
</style>
